<template>
    <van-nav-bar
        left-arrow
        :title="$t('wallet.myCard')"
        @click-left="router.back()"
    />
    <div class="app-pad feild add-card">
        <label>{{ $t('wallet.cardNum') }}</label>
        <van-field v-model="form.bankCardNumber" :maxlength="50" :border="false" :placeholder="$t('place') + ' ' + $t('wallet.cardNum')" />

        <label>{{ $t('wallet.cardType') }}</label>
        <van-field v-model="form.bankName" readonly @click="onShow" :border="false" :placeholder="$t('wallet.placeCardType')" >
            <template #right-icon>
                <img src="@/assets/images/choose.png" alt="" class="add-card-right-icon">
            </template>
        </van-field>
        <label>{{ $t('wallet.cardName') }}</label>
        <van-field v-model="form.name" :border="false"  :maxlength="50" :placeholder="$t('place') + ' ' + $t('wallet.cardName')"/>
           
    </div>
    <div class="add-card-btn">
        <van-button round block type="primary" :disabled="disAdd()" @click="onAddCard">{{  $t('wallet.sureEidt')}}</van-button>
        <van-button round block color="#CECECE" v-if="data.id > 0" @click="onDel">{{  $t('wallet.delCard')}}</van-button>
    </div>

    <van-action-sheet v-model:show="data.show" >
        <br>
        <div v-for="item in data.actions" :key="item.name" @click="onSelect(item)" class="card-select">
            <div class="card-icon" :class="{ 'card-choose': form.bankName == item.name  }">
                <img :src="item.image" alt="" v-if="item.image" >
                <img src="@/assets/images/card_icon.png" alt="" v-else>
            </div>
            
            <span  class="card-name">{{item.name}}</span>
        </div>
    </van-action-sheet>
</template>
<script setup>

import { reactive, ref } from '@vue/reactivity';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from "vue-router";
import { addCard, delCard, getBackType, editCard } from '@/api/card';
import { onMounted } from '@vue/runtime-core';
import { Dialog } from 'vant';
const { t } = useI18n()
const router = useRouter()
const route = useRoute()
// 禁用添加
function disAdd () {
    let bol = Object.keys(form).some(key => form[key].length == 0)
    console.log(disAdd)
    return Object.keys(form).some(key => form[key].length == 0)
}
let form = reactive({
    bankName: "",
    bankCardNumber: "",
    name: ""
})
const data = reactive({
    id: "",
    actions: [],
    show: false,
    loading: false
})
function onShow () {
    data.show = !data.show
}
// 选择
function onSelect (e) {
    form.bankName = e.name
    onShow()
    console.log(e)
}
// 添加银行卡
async function onAddCard () {
    Dialog.confirm({
        title: t('wallet.tips'),
        message: t('wallet.tipsMsg'),
    }).then(async () => {
        if (data.loading) return
        data.loading = true
        let ret = {}
        if (data.id) {
           ret = await editCard({...form, id: data.id})
        } else {
            ret = await addCard(form)
        }
        data.loading = false
        if (ret.code == 200) {
            onBack()
        }
    })
}
// 删除
function onDel () {
    Dialog.confirm({
        message: t('wallet.sureDel'),
    }).then(async () => {
        let ret = await delCard(data.id)
        if (ret.code == 200) {
            onBack()
        }
    })
}
function onBack () {
    router.back()
}

// 获取参数
onMounted(async () => {
    let ret = await getBackType()
    if (ret.code == 200) {
        data.actions = ret.data
    }
    console.log(data.actions)
    if (route.query.bankCardNumber) {
        let { bankName, bankCardNumber,  name, id } = route.query
        form.bankName = bankName
        form.bankCardNumber = bankCardNumber
        form.name = name
        data.id = id
        console.log(form)
    }
})
</script>

<style lang="less">
@import "@/assets/css/field.less";
.add-card-btn {
    margin: 0 40px;
    button {
        margin-top: 25px;
    }
}
.add-card-right-icon {
    width: 11px;
}
.card-select {
    padding: 0px 10px 10px 10px;
    display: flex;
    align-items: center;
    span {
        line-height: 1;
    }
}
.card-icon {
    img {
        width: 15px;
        // vertical-align: middle;
    }
    text-align: center;
    display: inline-block;
    margin-right: 3px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    border: 1px solid #999;
}
.card-choose {
    border: 1px solid  var(--primary);
}
</style>